<!-- 学校的列表 -->
<template>
  <div class="lms">
    <el-form label-width="80px" :inline="true">
      <el-form-item label="选择时间">
        <elNiceTime @change="timeChange"></elNiceTime>
      </el-form-item>
      <el-form-item label="区域">
        <el-cascader
          v-model="param.area"
          :options="regions"
          :props="{ checkStrictly: true }"
          placeholder="请选择所属地区"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="市场">
        <nice-select
          v-model="param.market_name"
          filterable
          placeholder="请选择市场负责人"
          clearable
          :options="selectEnums.nice_school.market_id"
        ></nice-select>
      </el-form-item>
      <el-form-item label="代理">
        <nice-select
          v-model="param.agent_name"
          filterable
          placeholder="请选择市场负责人"
          clearable
          :options="selectEnums.nice_school.school_agents"
        ></nice-select>
      </el-form-item>
      <el-form-item label="学校">
        <el-input
          placeholder="请输入学校全称"
          v-model="param.school_name"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click="sizeChangeHandle(pageSize)"
          >搜索</el-button
        >
        <el-button type="primary" size="small" @click="marketSchoolStatisticsFn"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <!-- <el-card class="box-card" style="padding:20px 0px;">
      <div class="text item">
        <el-table :data="marketDataList">
          <el-table-column prop="txt" label="年级"></el-table-column>
          <el-table-column label="拟报名"></el-table-column>
          <el-table-column label="报名人数"></el-table-column>
          <el-table-column label="报名率"></el-table-column>
          <el-table-column label="参课人数"></el-table-column>
          <el-table-column label="参课率"></el-table-column>
          <el-table-column label="转化人数"></el-table-column>
          <el-table-column label="转化率"></el-table-column>
          <el-table-column label="转化课次"></el-table-column>
          <el-table-column label="课次转化率"></el-table-column>
          <el-table-column label="数学转化人数"></el-table-column>
          <el-table-column label="数学转化人率"></el-table-column>
          <el-table-column label="英语人数"></el-table-column>
          <el-table-column label="英语率"></el-table-column>
          <el-table-column label="科学人数"></el-table-column>
          <el-table-column label="科学率"></el-table-column>
          <el-table-column label="续费人数"></el-table-column>
          <el-table-column label="续费率"></el-table-column>
          <el-table-column label="单科参课人数"></el-table-column>
          <el-table-column label="双科参课人数"></el-table-column>
          <el-table-column label="三科参课人数"></el-table-column>
        </el-table>
      </div>
    </el-card>-->
    <el-card class="box-card" v-for="(item, i) in schoolList" :key="i">
      <div
        slot="header"
        class="clearfix sl_table_header"
        @click="goDetail(item)"
      >
        <span class="sl_table_header_1">{{ item.school_name || "--" }}</span>
        <span class="sl_table_header_2"
          >{{ item.level_text || "--" }}/{{
            item.recruit_students_pattern_text || "--"
          }}</span
        >
        <span class="sl_table_header_3"
          >学校规模：{{ item.student_scale_text || "--" }}</span
        >
        <span class="sl_table_header_4"
          >市场：{{ item.market_name || "--" }}</span
        >
        <span class="sl_table_header_5"
          >代理：{{ item.agent_name || "--" }}</span
        >
      </div>
      <div class="text item">
        <el-table
          :data="item.classArr"
          :summary-method="getSummaries"
          show-summary
          header-cell-class-name="thead_f"
        >
          <el-table-column label="年级" width="100">
            <template slot-scope="scope">
              <b>{{ returnGrade(scope.row.grade) || "--" }}</b>
            </template>
          </el-table-column>
          <el-table-column label="拟报名" prop="total_plan_num">
            <template slot-scope="scope">
              <b>{{ scope.row.total_plan_num || 0 }}</b>
            </template>
          </el-table-column>
          <el-table-column label="报名人数" prop="total_sign_up_num">
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="续费人数/转化人数"
                placement="bottom"
              >
                <div>报名人数</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.total_sign_up_num || 0 }}</b>
            </template>
          </el-table-column>
          <el-table-column prop="total_sign_up_num_rate" label="报名率">
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="报名人数/拟报名人数"
                placement="bottom"
              >
                <div>报名率</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.total_sign_up_num_rate }}%</b>
            </template>
          </el-table-column>
          <el-table-column prop="join_class_num" label="参课人数">
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="所有课程有1讲以上完课的学生人数"
                placement="bottom"
              >
                <div>参课人数</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.join_class_num || 0 }}</b>
            </template>
          </el-table-column>
          <el-table-column prop="join_class_num_rate" label="参课率">
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="总参课人数/报名人数"
                placement="bottom"
              >
                <div>参课率</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.join_class_num_rate }}%</b>
            </template>
          </el-table-column>
          <el-table-column prop="convert_user_num" label="转化人数">
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="0付费的学生购买正价课程的人数"
                placement="bottom"
              >
                <div>转化人数</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.convert_user_num || 0 }}</b>
            </template>
          </el-table-column>
          <el-table-column prop="convert_user_num_rate" label="转化率">
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="转化的人数/到课学生数"
                placement="bottom"
              >
                <div>转化率</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.convert_user_num_rate }}%</b>
            </template>
          </el-table-column>

          <el-table-column prop="convert_period_num" label="转化课次">
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="0付费的学生购买正价课程的课程数量"
                placement="bottom"
              >
                <div>转化课次</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.convert_period_num || 0 }}</b>
            </template>
          </el-table-column>
          <el-table-column
            prop="convert_period_num_rate"
            label="课次转化率"
            width="120"
          >
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="转化课次数/到课学生数"
                placement="bottom"
              >
                <div>课次转化率</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.convert_period_num_rate }}%</b>
            </template>
          </el-table-column>
          <el-table-column
            prop="math_convert_num"
            label="数学转化人数"
            width="120"
          >
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="科目下转化的学生人数"
                placement="bottom"
              >
                <div>数学转化人数</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.math_convert_num || 0 }}</b>
            </template>
          </el-table-column>
          <el-table-column
            prop="math_convert_num_rate"
            label="数学转化人率"
            width="120"
          >
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="科目下转化的学生人数/该科目参课的人数"
                placement="bottom"
              >
                <div>数学转化人率</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.math_convert_num_rate }}%</b>
            </template>
          </el-table-column>
          <el-table-column prop="english_convert_num" label="英语人数">
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="科目下转化的学生人数"
                placement="bottom"
              >
                <div>英语人数</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.english_convert_num || 0 }}</b>
            </template>
          </el-table-column>
          <el-table-column prop="english_convert_num_rate" label="英语率">
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="科目下转化的学生人数/该科目参课的人数"
                placement="bottom"
              >
                <div>英语率</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.english_convert_num_rate }}%</b>
            </template>
          </el-table-column>
          <el-table-column prop="science_convert_num" label="科学人数">
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="科目下转化的学生人数"
                placement="bottom"
              >
                <div>科学人数</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.science_convert_num || 0 }}</b>
            </template>
          </el-table-column>
          <el-table-column prop="science_convert_num_rate" label="科学率">
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="科目下转化的学生人数/该科目参课的人数"
                placement="bottom"
              >
                <div>科学率</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.science_convert_num_rate }}%</b>
            </template>
          </el-table-column>
          <el-table-column prop="renewal_user_num" label="续费人数">
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="已购买正价课的学生再次购买正价课的人数"
                placement="bottom"
              >
                <div>续费人数</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.renewal_user_num || 0 }}</b>
            </template>
          </el-table-column>
          <el-table-column prop="renewal_user_num_rate" label="续费率">
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="续费人数/转化人数"
                placement="bottom"
              >
                <div>续费率</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.renewal_user_num_rate }}%</b>
            </template>
          </el-table-column>
          <el-table-column
            prop="one_subject_num"
            label="单科参课人数"
            width="120"
          >
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="有且只有1个科目的课程参课的人数"
                placement="bottom"
              >
                <div>单科参课人数</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.one_subject_num || 0 }}</b>
            </template>
          </el-table-column>
          <el-table-column
            prop="two_subject_num"
            label="双科参课人数"
            width="120"
          >
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="有且只有2个科目的课程参课的人数"
                placement="bottom"
              >
                <div>双科参课人数</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.two_subject_num || 0 }}</b>
            </template>
          </el-table-column>
          <el-table-column
            prop="three_subject_num"
            label="三科参课人数"
            width="120"
          >
            <template slot="header" slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="有且只有3个科目的课程参课的人数"
                placement="bottom"
              >
                <div>三科参课人数</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <b>{{ scope.row.three_subject_num || 0 }}</b>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
import { marketSchoolList, marketSchoolStatistics } from "@/api/operate.js";
import { queryStaffListByType } from "@/api/api.js";
import utils from "@/utils/common.js";
import { myEnumsMixins } from "@/utils/mixins";
export default {
  mixins: [myEnumsMixins],
  components: {
    elNiceTime: resolve =>
      require(["@/views/modules/operate-center/el-nice-time.vue"], resolve)
  },
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      param: {
        start_time: "",
        end_time: "",
        market_name: "",
        agent_name: "",
        school_name: "",
        area: []
      },
      marketDataList: [
        {
          txt: "总计"
        }
      ],
      selectArr: [],
      schoolList: [],
      loadingOnce: true
    };
  },
  activated() {
    this.$store.dispatch("common/saveRegion");
    this.param.area = [];
    this.param.area[0] = 330000;
    this.getQueryStaffListByType();
  },
  computed: {
    regions() {
      return this.$store.state.common.regions;
    }
  },
  created() {},
  mounted() {},
  methods: {
    timeChange(val) {
      this.param = {
        ...this.param,
        ...val
      };
      if (this.loadingOnce) {
        this.loadingOnce = false;
        this.marketSchoolListFn();
      }
    },
    // 获取市场负责人以及代理商的数组
    async getQueryStaffListByType() {
      let { nice_school } = this.selectEnums;
      let obj = {};
      let market_id = await queryStaffListByType({ "sys_user.user_type": "6" }); // 市场负责人的列表
      if (market_id[0]) {
        return;
      }
      obj.market_id = market_id[1].data.list;
      obj.market_id.forEach(item => {
        item.label = item.name;
        item.value = item.name;
      });
      let school_agents = await queryStaffListByType({
        "sys_user.user_type": "14"
      }); // 代理商的列表
      if (school_agents[0]) {
        return;
      }
      obj.school_agents = school_agents[1].data.list;
      obj.school_agents.forEach(item => {
        item.label = item.name;
        item.value = item.name;
      });
      this.selectEnums.nice_school = { ...nice_school, ...obj };
    },
    // 点击前往详情页面
    goDetail(item) {
      this.$store.schoolDetail = item;
      setTimeout(() => {
        this.$router.push(
          "/operate-center/market/school-list-info?school_id=" + item.school_id
        );
      }, 50);
    },
    // 返回年级数据
    returnGrade(num) {
      let items = this.selectEnums.nice_course.grade.filter(item => {
        return item.value == num;
      });
      return items[0] ? items[0].label : "";
    },
    // 返回计算好的比例
    returnRateNo(f, z) {
      return utils.returnRateNo(f, z);
    },
    // 获取初始数据
    marketSchoolListFn() {
      let { param } = this;
      param = {
        ...param,
        ...{
          province: param.area[0] || null,
          city: param.area[1] || null,
          area: param.area[2] || null,
          currPage: this.pageIndex,
          pageSize: this.pageSize
        }
      };
      marketSchoolList(param).then(res => {
        if (res[0]) {
          return;
        }
        let schoolList = res[1].data.schoolList;
        schoolList.forEach((item, index) => {
          let arr = [
            ...item.total_plan_num,
            ...item.total_sign_up_num,
            ...item.attendance_class_num,
            ...item.join_class_data,
            ...item.convert_data,
            ...item.renewal_data,
            ...item.subject_num_data
          ];
          let newSchoolArr = [];
          for (let newObj of arr) {
            if (!newSchoolArr[newObj.grade]) {
              newSchoolArr[newObj.grade] = newObj;
            } else {
              newSchoolArr[newObj.grade] = {
                ...newSchoolArr[newObj.grade],
                ...newObj
              };
            }
          }
          newSchoolArr = newSchoolArr.filter(item => {
            return item && item;
          });
          for (let ix in newSchoolArr) {
            // 插入不存在率值
            newSchoolArr[ix] = {
              ...newSchoolArr[ix],
              ...{
                total_sign_up_num_rate: this.returnRateNo(
                  newSchoolArr[ix].total_sign_up_num,
                  newSchoolArr[ix].total_plan_num
                ),
                join_class_num_rate: this.returnRateNo(
                  newSchoolArr[ix].join_class_num,
                  newSchoolArr[ix].total_sign_up_num
                ),
                convert_user_num_rate: this.returnRateNo(
                  newSchoolArr[ix].convert_user_num,
                  newSchoolArr[ix].attendance_class_num
                ),
                convert_period_num_rate: this.returnRateNo(
                  newSchoolArr[ix].convert_period_num,
                  newSchoolArr[ix].attendance_period_num
                ),
                math_convert_num_rate: this.returnRateNo(
                  newSchoolArr[ix].math_convert_num,
                  newSchoolArr[ix].math_join_class_num
                ),
                english_convert_num_rate: this.returnRateNo(
                  newSchoolArr[ix].english_convert_num,
                  newSchoolArr[ix].english_join_class_num
                ),
                science_convert_num_rate: this.returnRateNo(
                  newSchoolArr[ix].science_convert_num,
                  newSchoolArr[ix].science_join_class_num
                ),
                renewal_user_num_rate: this.returnRateNo(
                  newSchoolArr[ix].renewal_user_num,
                  newSchoolArr[ix].convert_user_num
                )
              }
            };
          }
          item.classArr = newSchoolArr;
        });
        this.schoolList = schoolList;
        this.totalPage = res[1].data.totalCount;
      });
    },
    // 传入数组循环遍历插入
    returnNewschoolArr(arr, oldArr) {},
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);

            if (!isNaN(value)) {
              return prev + curr;
            } else {
              console.log(value);
              return prev;
            }
          }, 0);
          if (
            index == 1 ||
            index == 2 ||
            index == 4 ||
            index == 6 ||
            index == 8 ||
            index == 10 ||
            index == 12 ||
            index == 14 ||
            index == 16 ||
            index == 18 ||
            index == 19 ||
            index == 20
          ) {
          } else {
            sums[index] =
              (Number(sums[index]) / Number(data.length)).toFixed(2) + "%";
          }
        } else {
          sums[index] = "0";
        }
      });

      return sums;
    },
    // 点击导出Excel
    marketSchoolStatisticsFn() {
      let { param } = this;
      param = {
        ...param,
        ...{
          province: param.area[0] || null,
          city: param.area[1] || null,
          area: param.area[2] || null,
          currPage: this.pageIndex,
          pageSize: this.pageSize
        }
      };
      marketSchoolStatistics(param).then(res => {
        if (!res[0]) {
          utils.downExcel(
            res,
            `学校统计表${param.teacher_name ? "-" + param.teacher_name : ""}${
              param.start_time
                ? "-" + param.start_time + "-" + param.end_time
                : ""
            }`
          );
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.marketSchoolListFn();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.marketSchoolListFn();
    }
  }
};
</script>
<style scoped lang="scss">
b {
  font-size: 20px;
}
.sl_table_header {
  &_1 {
    font-size: 16px;
    font-weight: 600;
    color: #409eff;
    cursor: pointer;
  }
  &_2 {
    color: #f56c6c;
  }
  span {
    margin-right: 40px;
  }
}
.lms {
  ::v-deep.el-card__body {
    padding: 0px 20px;
  }
  ::v-deep.el-pagination {
    margin-bottom: 15px;
  }
}
.box-card {
  margin-bottom: 20px;
}
.box-card_in {
  padding: 0px 10px;
}
</style>
